<template>
  <div class="node_box">
    <el-table :data="form.tableData" style="width: 100%" border fit>
      <el-table-column fixed type="index" label="序号" />
      <el-table-column fixed prop="indicatorName" label="指标名称">
        <template #default="{ row }">
          <el-input v-model="row.indicatorName" />
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="创建人">
        <template #default="{ row }">
          <el-input v-model="row.creator" />
        </template>
      </el-table-column>
      <el-table-column prop="domainId" label="所属指标域">
        <template #default="{ row }">
          <el-select
            v-model="row.domainId"
            class="m-2"
            placeholder="请选择指标域"
            size="large"
            style="width: 100px"
            @change="handleChange(row.domainId)"
          >
            <el-option
              v-for="item in domainList"
              :key="item.id"
              :label="item.domainName"
              :value="item.id!"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="indicatorGroup" label="所属分组">
        <template #default="{ row }">
          <el-select
            v-model="row.indicatorGroup"
            class="m-2"
            placeholder="请选择分组"
            size="large"
            style="width: 100px"
          >
            <el-option
              v-for="item in indicatorGroupList"
              :key="item.id"
              :label="item.domainName"
              :value="item.id!"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="abnormalId" label="异常规则">
        <template #default="{ row }">
          <el-select
            v-model="row.abnormalId"
            class="m-2"
            placeholder="请选择异常规则"
            size="large"
            style="width: 100px"
          >
            <el-option
              v-for="item in abnormalRules"
              :key="item.id"
              :label="item.abnormalName"
              :value="item.id!"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述">
        <template #default="{ row }">
          <el-input v-model="row.description" />
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" type="primary" @click="previous">上一步</el-button>
    <el-button class="mt-4" type="primary" @click="insertIndicator">完成</el-button>
  </div>
</template>
<script lang="ts">
export default { name: "CreateIndicator" };
</script>
<script setup lang="ts">
import IndicatorDomainAPI, {
  DomainListParameter,
  DomainListResponse,
  IndicatorList,
  IndicatorChildren,
} from "@/api/indicationManage/domain";
import IndicatorManageAPI from "@/api/strategy/strategy-index-database";

import StrategyManageAPI, {
  InsertByIndicatorDTO,
  IndicatorCreateBasedRequestDTO,
} from "@/api/strategy/strategyManage";
import indicatorAPI, { AbnormalRulesResponse } from "@/api/indicationManage/indexNew";

// 异常规则列表
const abnormalRules = ref<AbnormalRulesResponse[]>([]);

const domainList = ref<IndicatorList[]>([]);
const indicatorGroupList = ref<IndicatorChildren[]>();
const domainListParameter = reactive<DomainListParameter>({ dataSourceId: 0 });
const indicatorDto = reactive<IndicatorCreateBasedRequestDTO>({});

const props = defineProps<{
  dataSourceId: any;
  ids: any[];
  dto: InsertByIndicatorDTO;
}>();

const emits = defineEmits(["submit-success", "back-close"]);
const form = ref({
  tableData: [
    {
      indicatorName: "",
      creator: "",
      domainId: 0,
      indicatorGroup: 0,
      description: "",
    },
  ],
});

// 获取异常规则列表
const getAbnormalRules = async () => {
  await indicatorAPI
    .AbnormalRules()
    .then((res) => {
      abnormalRules.value = res.data || [];
    })
    .catch((error) => {
      console.error("获取异常规则失败:", error);
    });
};

async function handleQuery() {
  domainListParameter.dataSourceId = props.dataSourceId;
  await IndicatorDomainAPI.Select(domainListParameter).then((data) => {
    domainList.value = data.indicatorList!;
  });
}

async function handleChange(domainId?: any) {
  indicatorGroupList.value = domainList.value.find((item) => item.id === domainId)?.children;
}

const previous = () => {
  emits("back-close");
};

const insertIndicator = async () => {
  indicatorDto.indicators = [] as InsertByIndicatorDTO[];
  props.dto.creator = form.value.tableData[0].creator;
  props.dto.domainGroupId = form.value.tableData[0].indicatorGroup;
  props.dto.indicatroName = form.value.tableData[0].indicatorName;
  props.dto.abnormalId = form.value.tableData[0].abnormalId;
  props.dto.parentIds = props.ids;
  indicatorDto.indicators.push(props.dto);
  console.log(indicatorDto.indicators);
  await StrategyManageAPI.InsertByIndicator(indicatorDto).then((data) => {
    ElMessage.success("创建成功");
  });
  emits("submit-success");
  router.push({
    name: "Indication",
    query: {
      dataSourceId: props.dataSourceId,
    },
  });
};

onMounted(() => {
  handleQuery();
  getAbnormalRules();
});
</script>
